<template>
  <div>
    <h1>爷爷级别</h1>
    <label for="">
      <input v-model="colorVal" value="red" name="color" type="radio">
      红色
    </label>
    <label for="">
      <input v-model="colorVal" type="radio" value="pink" name="color">粉色
    </label>
    <label for="">
      <input v-model="colorVal" type="radio" value="blue" name="color">
      皮友色
    </label>
    <div class="box">

    </div>
    <hr>
    <provideA></provideA>
  </div>
</template>
<script setup lang='ts'>
import provideA from '/src/components/provide/provideA.vue'
import { ref, provide ,readonly} from 'vue';
const colorVal = ref<string>('red')
  //不让子组件修改使用readonly 不使用子组件可以随意修改
provide('color', readonly(colorVal))

</script>
<style scoped lang='less'>
div {
  font-size: 30px;

  input {
    height: 50px;
    width: 50px;
  }
}

.box {
  height: 100px;
  width: 100px;
  border: 1px solid #ccc;
  background: v-bind(colorVal);
}
</style>
